<template>
	<view class="page">
		<u-navbar autoBack title="问题反馈" fixed placeholder></u-navbar>
		<c-content :top="statusBarHeight + 44" :bottom="safeAreaBottom" padding="10px 14px">
			<textarea placeholder="在使用过程中，遇到的任何体验问题或功能建议，欢迎反馈~" placeholder-style="color: #232832;" maxlength="-1"></textarea>
			<u-divider></u-divider>
			<view class="imgs">
				<image :style="{width: `${boxSize}px`, height: `${boxSize}px`}" :src="img" v-for="(img, index) in imgs"
					:key="index" v-if="imgs.length > 0" @click="previewImg(index)" @longtap="longTap(index)"></image>
				<view v-if="imgs.length < 3" :style="{width: `${boxSize}px`, height: `${boxSize}px`}" class="upload"
					@click="upload()">
					<u-icon name="photo" color="#dddddd" :size="28"></u-icon>
				</view>
			</view>
		</c-content>
	</view>
</template>

<script>
	import mixins from '@/mixins/index.js'
	export default {
		mixins: [mixins],
		data() {
			return {
				imgs: []
			}
		},
		computed: {
			boxSize() {
				return ((uni.getSystemInfoSync().windowWidth - 28 - 30) / 3).toFixed(2)
			}
		},
		methods: {
			upload() {
				// #ifdef APP
				uni.chooseImage({
					count: 3,
					sourceType: ['alumb', 'camera'],
					sizeType: ['compressed'],
					success: ({
						tempFilePaths,
						tempFiles
					}) => {
						console.log(tempFilePaths);
						console.log(tempFiles);
						// tempFilePaths.forEach(tempFilePath => {
						// 	uni.compressImage({
						// 		src: tempFilePath,
						// 		compressedWidth: 200,
						// 		success: ({
						// 			tempFilePath
						// 		}) => {
						// 			this.imgs.push(tempFilePath)
						// 		},
						// 		fail: (err) => {
						// 			console.log(err);
						// 		}
						// 	})
						// })
						// this.$request.uploadFile(tempFiles[0], 'image').then(res => {
						// 	console.log(res);
						// })
					},
					fail: () => {
						uni.toast.show('未授权')
					}
				})
				// #endif
				// #ifdef MP-WEIXIN
				uni.chooseMedia({
					count: 3,
					mediaType: ['image'],
					sourceType: ['alumb', 'camera'],
					sizeType: ['compressed'],
					success: ({
						tempFiles,
						type
					}) => {
						console.log(tempFiles);
						console.log(type);
						tempFiles.forEach(tempFile => {
							uni.compressImage({
								src: tempFile.tempFilePath,
								compressedWidth: 200,
								success: ({
									tempFilePath
								}) => {
									this.imgs.push(tempFilePath)
								},
								fail: (err) => {
									console.log(err);
								}
							})
						})
					},
					fail: (err) => {
						console.log(1, err);
						if (err.errno === 112) {
							uni.getAppAuthorizeSetting({
								complete: (rs) => {
									console.log(rs);
								}
							})
						}
					}
				})
				// #endif
			},
			previewImg(index) {
				uni.previewImage({
					urls: this.imgs,
					current: index
				})
			},
			longTap(index) {
				uni.showActionSheet({
					title: '删除图片',
					alertText: '删除图片',
					itemList: ['删除'],
					itemColor: '#FF2A43',
					success: ({
						tapIndex
					}) => {
						console.log(tapIndex);
						if (tapIndex == 0) {
							console.log("删除图片：", index);
							this.imgs.splice(index, 1)
						}
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	textarea {
		width: 100%;
		color: #232832;
	}

	.imgs {
		display: flex;
		align-items: center;
		justify-content: flex-start;

		image {
			display: block;
			border-radius: 10px;
			margin: 5px;
		}

		.upload {
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px dashed #dddddd;
			border-radius: 10px;
			margin: 5px;
		}
	}
</style>